{layout name="main" /}
<link rel="stylesheet" type="text/css" href="/src/css/main.css" media="all">
<section class="larry-wrapper">
    <div class="row state-overview">
        <div class="col-lg-3 col-sm-6">
            <section class="panel" style="height: 100px;">
                <div class="symbol userblue"><i class="fa fa-users"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count1">10</h1>
                    </a>
                    <p>用户总量</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="panel">
                <div class="symbol commred"><i class="fa fa-user"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count2">1</h1>
                    </a>
                    <p>今日注册用户</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="panel">
                <div class="symbol articlegreen">
                    <i class="fa fa-cloud"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count3">50</h1>
                    </a>
                    <p>接口访问</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="panel">
                <div class="symbol rsswet">
                    <i class="fa fa-exclamation-triangle"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count4">0</h1>
                    </a>
                    <p>错误报告</p>
                </div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <section class="panel" style="min-height: 392px;">
                <header class="panel-heading bm0">
                    <span class='span-title'>系统概览</span>
                    <span class="tools pull-right"><a href="javascript:void(0);" class="iconpx-chevron-down"></a></span>
                </header>
                <div class="panel-body">
                    <table class="table table-hover personal-task">
                        <tbody>
                        <tr>
                            <td>
                                <strong>版本信息</strong>： 版本名称：<a href="https://github.com/AxiosCros/tpr-cms" target="_blank">TPR
                                CMS</a> 版本号: v2.0.0_beta
                            </td>
                            <td>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>开发作者</strong>：流水无痕(博客hanxv.cn)
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>网站域名</strong>：{{env.domain}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>操作系统</strong>：{{env.os}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>服务器IP</strong>：{{env.server_ip}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>服务器环境</strong>：{{env.server_env}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>磁盘空间</strong>：{{env.disk}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>最大上传限制</strong>：{{env.upload_limit}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>当前登录用户</strong>： <span class="current_user">{{env.username}}</span>
                            </td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <!-- 网站信息统计｛SEO数据统计｝ -->
            <section class="panel" style="min-height: 392px;">
                <header class="panel-heading bm0">
                    <span class='span-title'>网站信息统计｛SEO数据统计｝</span>
                    <span class="tools pull-right"><a href="javascript:void(0);" class="iconpx-chevron-down"></a></span>
                </header>
                <div class="panel-body" style="border-top: 1px dotted #E3E7EA;">
                    <div style="display: block;padding: 15px;height: 300px;" id="echarts-example"></div>
                </div>
            </section>
        </div>
        <div class="col-md-12">
            <section class="panel">
                <header class="panel-heading bm0">
                    <span class='span-title'>最新动态</span>
                    <span class="badge" style="background-color:#FF3333;"> new </span>
                    <span class="tools pull-right"><a href="javascript:void(0);" class="iconpx-chevron-down"></a></span>
                </header>
                <div class="panel-body">
                    <table class="table table-hover personal-task">
                        <tbody>
                        <tr>
                            <td>原创</td>
                            <td>
                                <a href="#" target="_blank">汪涵率众特工入侵地球 20160408</a>
                            </td>
                            <td class="col-md-5">阅读量：1350 &nbsp;&nbsp;&nbsp;&nbsp; 2016-04-11 10:00:37</td>
                        </tr>
                        <tr>
                            <td>原创</td>
                            <td>
                                <a href="#" target="_blank">汪涵率众特工入侵地球 20160408</a>
                            </td>
                            <td class="col-md-5">阅读量：1350 &nbsp;&nbsp;&nbsp;&nbsp; 2016-04-11 10:00:37</td>
                        </tr>
                        <tr>
                            <td>原创</td>
                            <td>
                                <a href="#" target="_blank">汪涵率众特工入侵地球 20160408</a>
                            </td>
                            <td class="col-md-5">阅读量：1350 &nbsp;&nbsp;&nbsp;&nbsp; 2016-04-11 10:00:37</td>
                        </tr>
                        <tr>
                            <td>原创</td>
                            <td>
                                <a href="#" target="_blank">汪涵率众特工入侵地球 20160408</a>
                            </td>
                            <td class="col-md-5">阅读量：1350 &nbsp;&nbsp;&nbsp;&nbsp; 2016-04-11 10:00:37</td>
                        </tr>
                        <tr>
                            <td>原创</td>
                            <td>
                                <a href="#" target="_blank">汪涵率众特工入侵地球 20160408</a>
                            </td>
                            <td class="col-md-5">阅读量：1350 &nbsp;&nbsp;&nbsp;&nbsp; 2016-04-11 10:00:37</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
</section>
<script type="text/javascript">
    var vue = new Vue({
        el: ".table",
        data: {
            env:{
                domain: '',
                os: '',
                server_ip: '',
                server_env: '',
                disk: '',
                upload_limit: '',
                username: ''
            }
        }
    });
    vue.$nextTick(function () {
        var url = "{:url('index/index/main')}";
        $.post(url, {}, function (res) {
            vue.env = res.env;
        });
    });
    layui.use(['jquery', 'layer', 'element'], function () {
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        window.element = layui.element;

        $('.panel .tools .iconpx-chevron-down').click(function () {
            var el = $(this).parents(".panel").children(".panel-body");
            if ($(this).hasClass("iconpx-chevron-down")) {
                $(this).removeClass("iconpx-chevron-down").addClass("iconpx-chevron-up");
                el.slideUp(200);
            } else {
                $(this).removeClass("iconpx-chevron-up").addClass("iconpx-chevron-down");
                el.slideDown(200);
            }
        })

    });
</script>

<script src="/src/plugs/echarts/echarts.min.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('echarts-example'));
    option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

</script>